// 自定义配色
import React, { useState } from 'react';
import InputColorPicker from '../InputColorPicker';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import DataColor from '../DataColor';
interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const ScatterCustomColor = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	const [ chartLineColor, setChartLineColor ] = useState( ( config.style && config.style.chartLineColor ) || '#000' );
	const [ gridlineColor, setGridlineColor ] = useState( ( config.style && config.style.chartGridlineColor ) || '#639bff' );
	const [ lineDataColor, setLineDataColorr ] = useState( ( config.style && config.style.chartLineDataColor ) || '#639bff' );

	// 轴线颜色
	const handleChange = ( color ) => {
		setChartLineColor( color );
		form.setFieldsValue( { chartLineColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	// 网格线颜色
	const handleGridlineColorChange = ( color ) => {
		setGridlineColor( color );
		form.setFieldsValue( { chartGridlineColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	// 轴值颜色
	const handleLineDataColorChange = ( color ) => {
		setLineDataColorr( color );
		form.setFieldsValue( { chartLineDataColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>
			<FormItem
				label="轴线颜色"
				name="chartLineColor"
				labelAlign="left"
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 16 }}
			>
				<InputColorPicker color={chartLineColor} change={( color ) => handleChange( color )}></InputColorPicker>
			</FormItem>
			<FormItem
				label="轴值颜色"
				name="chartLineDataColor"
				labelAlign="left"
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 16 }}
			>
				<InputColorPicker
					color={lineDataColor}
					change={( color ) => handleLineDataColorChange( color )}
				></InputColorPicker>
			</FormItem>
			<FormItem
				label="网格线颜色"
				name="chartGridlineColor"
				labelAlign="left"
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 16 }}
			>
				<InputColorPicker
					color={gridlineColor}
					change={( color ) => handleGridlineColorChange( color )}
				></InputColorPicker>
			</FormItem>
		
			<DataColor config={config} form={form} onValuesChange={onValuesChange}></DataColor>
		</div>
	);
};

export default React.memo( ScatterCustomColor );
